<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="keywords" content="橙券">
    <meta name="description" content="橙券">
    <title>橙券</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/header.css">
    <link rel="stylesheet" href="./css/footer.css">
    <link rel="stylesheet" href="./css/index.css?v=1">
</head>
<body>
    <header class="header header-fixed">
        <div class="auto-center">
            <a class="logo" href="#"></a>
            <ul class="nav">
                <li class="nav-item">
                    <a href="#">首页</a>
                </li>
                <li class="nav-item">
                    <a href="#">橙品牌</a>
                    <img class="arrow-down" src="./images/arrow-down.png" alt="arrow-down" width="13px" height="6px">

                    <div class="mask">
                        <a href="#">橙品牌</a>
                        <a href="#">橙品牌</a>
                        <a href="#">橙品牌</a>
                    </div>
                </li>
                <li class="nav-item">
                    <a href="#">橙权益</a>
                </li>
                <li class="nav-item">
                    <a href="#">行业案例</a>
                </li>
                <li class="nav-item">
                    <a href="#">新闻动态</a>
                    <img class="arrow-down" src="./images/arrow-down.png" alt="arrow-down" width="13px" height="6px">

                    <div class="mask">
                        <a href="#">橙品牌</a>
                        <a href="#">橙品牌</a>
                        <a href="#">橙品牌</a>
                        <a href="#">橙品牌</a>
                        <a href="#">橙品牌</a>
                        <a href="#">橙品牌</a>
                        <a href="#">橙品牌</a>
                        <a href="#">橙品牌</a>
                        <a href="#">橙品牌</a>
                    </div>
                </li>
                <li class="nav-item">
                    <a href="#">关于我们</a>
                </li>
            </ul>
        </div>
    </header>

    <div class="banner full-center">
        <ul class="dots">
            <li class="dot-item active"></li>
            <li class="dot-item"></li>
            <li class="dot-item"></li>
            <li class="dot-item"></li>
        </ul>
    </div>


    <main class="auto-center">
        <section class="brand">
            <img src="./images/logo-unfont.png" alt="logo-unfont" width="76" height="70">
            <span class="desc">橙券，是权益营销方案提供商，为实现品牌-市场-用户的紧密互联提供强有力的智慧支持。</span>
            <div class="button">
                <span>了解更多</span>
                <img src="./images/arrow-right-orange.png" alt="arrow-right-orange" width="6" height="12">
            </div>
        </section>

        <section class="function">
            <div class="title">
                <img src="./images/logo-title.png" alt="logo-title" width="391" height="86">
            </div>

            <ul class="products">
                <li class="pro-item">
                    <div class="pro-bg" style="background-image: url(./images/type1-sell.png);"></div>
                    <div class="pro-bg-hover" style="background-image: url(./images/type1-sell-hover.png)"></div>
                    <div class="pro-desc">
                        <img src="./images/type1-sell-icon.png" alt="type1-sell-icon" width="90" height="90">
                        <span class="pro-title">橙营销</span>
                        <span class="pro-title-desc">
                            营销助力品牌升级
                        </span>
                        <div class="button pro-more">
                            <span>了解更多</span>
                            <img src="./images/arrow-right-white.png" alt="arrow-right-white" width="6" height="12">
                        </div>
                    </div>
                </li>
                <li class="pro-item">
                    <div class="pro-bg" style="background-image: url(./images/type1-sell.png);"></div>
                    <div class="pro-bg-hover" style="background-image: url(./images/type1-sell-hover.png)"></div>
                    <div class="pro-desc">
                        <img src="./images/type1-sell-icon.png" alt="type1-sell-icon" width="90" height="90">
                        <span class="pro-title">橙营销</span>
                        <span class="pro-title-desc">
                            营销助力品牌升级
                        </span>
                        <div class="button pro-more">
                            <span>了解更多</span>
                            <img src="./images/arrow-right-white.png" alt="arrow-right-white" width="6" height="12">
                        </div>
                    </div>
                </li>
                <li class="pro-item">
                    <div class="pro-bg" style="background-image: url(./images/type1-sell.png);"></div>
                    <div class="pro-bg-hover" style="background-image: url(./images/type1-sell-hover.png)"></div>
                    <div class="pro-desc">
                        <img src="./images/type1-sell-icon.png" alt="type1-sell-icon" width="90" height="90">
                        <span class="pro-title">橙营销</span>
                        <span class="pro-title-desc">
                            营销助力品牌升级
                        </span>
                        <div class="button pro-more">
                            <span>了解更多</span>
                            <img src="./images/arrow-right-white.png" alt="arrow-right-white" width="6" height="12">
                        </div>
                    </div>
                </li>
                <li class="pro-item">
                    <div class="pro-bg" style="background-image: url(./images/type1-sell.png);"></div>
                    <div class="pro-bg-hover" style="background-image: url(./images/type1-sell-hover.png)"></div>
                    <div class="pro-desc">
                        <img src="./images/type1-sell-icon.png" alt="type1-sell-icon" width="90" height="90">
                        <span class="pro-title">橙营销</span>
                        <span class="pro-title-desc">
                            营销助力品牌升级
                        </span>
                        <div class=" button 
                        pro-more">
                            <span>了解更多</span>
                            <img src="./images/arrow-right-white.png" alt="arrow-right-white" width="6" height="12">
                        </div>
                    </div>
                </li>
            </ul>
        </section>
    
        <section class="vendor">
            <div class="title">
                <img src="./images/logo-title2.png" alt="logo-title2" width="302" height="79">
            </div>

            <div class="button-group">
                <a class="button-item" href="#">金融行业</a>
                <a class="button-item" href="#">金融行业</a>
                <a class="button-item" href="#">金融行业</a>
                <a class="button-item" href="#">金融行业</a>
                <a class="button-item" href="#">金融行业</a>
                <a class="button-item" href="#">金融行业</a>
            </div>

            <div class="types">
                <img src="./images/arrow-left-gray.png" alt="arrow-left-gray" width="53" height="53">

                <div class="type-item type-left">
                    <img class="type-logo" src="./images/B-CUCC.png" alt="B-CUCC" width="218" height="55">
                    <p class="type-desc">
                        作为中国的银行卡联合组织，中国银联处于我国银行卡产业的核心和枢纽地位，对我国银行卡产业发展发挥着基础性作用，各银行通过银联跨行交易清算系统，实现了系统间的互联互通，进而使银行卡得以跨银行、跨地区和跨境使用。 
                    </p>
                </div>
                <div class="type-item type-middle">
                    <img class="type-logo" src="./images/B-CUCC.png" alt="B-CUCC" width="218" height="55">
                    <p class="type-desc">
                        作为中国的银行卡联合组织，中国银联处于我国银行卡产业的核心和枢纽地位，对我国银行卡产业发展发挥着基础性作用，各银行通过银联跨行交易清算系统，实现了系统间的互联互通，进而使银行卡得以跨银行、跨地区和跨境使用。 
                    </p>
                </div>
                <div class="type-item type-right">
                    <img class="type-logo" src="./images/B-CUCC.png" alt="B-CUCC" width="218" height="55">
                    <p class="type-desc">
                        作为中国的银行卡联合组织，中国银联处于我国银行卡产业的核心和枢纽地位，对我国银行卡产业发展发挥着基础性作用，各银行通过银联跨行交易清算系统，实现了系统间的互联互通，进而使银行卡得以跨银行、跨地区和跨境使用。 
                    </p>
                </div>

                <img src="./images/arrow-right-gray.png" alt="arrow-right-gray" width="53" height="53">
            </div>
        </section>
    </main>

    <div class="ad full-center">
        <div class="title">
            依托橙券，聚焦权益，全面合作
        </div>
        <div class="phones">
            <span>全国服务热线：400-096-0828</span>
            <span class="border"></span>
            <span>商务合作专线：156-6806-1789</span>
        </div>
        <div class="button">
            <span>了解更多</span>
            <img src="./images/arrow-right-white.png" alt="arrow-right-white" width="6" height="12">
        </div>
    </div>

    <footer class="footer">
        <div class="auto-center">
            <div class="service">
                <div class="chat">
                    <img src="./images/service.png" alt="service" width="50px" height="50px"><div class="concat">
                        <span class="phone">400-096-0828</span>
                        <span class="phone-desc">
                            7*24小时客服为您服务
                        </span> </div>
                    </div>
                    <div class="qrcode">
                        <img src="./images/QR-code.png" alt="#" width="159px"
                        height="159px">
                        <span class="qrcode-desc">微信扫描二维码，关注【橙券】</span>
                    </div>
            </div>
            <ul class="nav">
                <li class="nav-item">
                    <span class="title">橙品牌</span>
                    <a href="#">橙营销</a>
                    <a href="#">橙营销</a>
                    <a href="#">橙营销</a>
                    <a href="#">橙营销</a>
                </li>
                <li class="nav-item">
                    <span class="title">橙品牌</span>
                    <a href="#">橙营销</a>
                    <a href="#">橙营销</a>
                    <a href="#">橙营销</a>
                    <a href="#">橙营销</a>
                </li>
                <li class="nav-item">
                    <span class="title">快速入口</span>
                    <a href="#">橙营销</a>
                    <a href="#">橙营销</a>
                    <a href="#">橙营销</a>
                    <a href="#">橙营销</a>
                </li>
                <li class="nav-item">
                    <span class="title">快速入口</span>
                    <a href="#">橙营销</a>
                    <a href="#">橙营销</a>
                    <a href="#">橙营销</a>
                    <a href="#">橙营销</a>
                </li>
            </ul>
        </div>
    </footer>

    <div class="copy">
        <div class="auto-center">
            &copy;2019&nbsp;&nbsp;&nbsp;&nbsp;山东鼎信网络科技有限公司&nbsp;&nbsp;&nbsp;&nbsp;鲁ICP备13023321号-25
        </div>
    </div>
</body>
</html>